import React from 'react';
import { Badge, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons';
import AnimatedTransition from '../AnimatedTransition';
import { Outlet, useNavigate } from 'react-router-dom';

const TabList = () => {
    const navigate = useNavigate();
    const tabs = [
        {
            key: '/tablist/home',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: '/tablist/fenlei',
            title: '待办',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: '/tablist/gouwuche',
            title: '消息',
            icon: (active: boolean) =>
                active ? <MessageFill /> : <MessageOutline />,
            badge: '99+',
        },
        {
            key: '/tablist/my',
            title: '我的',
            icon: <UserOutline />,
        },
    ]
    const getTable = (value: unknown) => {
        // console.log(value);
        navigate(value as string);
    }
    return (
        <AnimatedTransition>
            <div style={{marginBottom: '0.5rem'}}>
                <Outlet />
            </div>
            <div style={{width: '100%', height:'0.5rem',backgroundColor: 'white', position: 'fixed', bottom: 0, left: 0, zIndex: 999}}>
                <TabBar onChange={value => getTable(value)}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </AnimatedTransition>
    )
}

export default TabList;